
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>

<link href="css/index.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript"> 
$(function(){
	
	// 移到留言上可以删除,编辑-------------------------------------------
		$('#mian .list .onep').hover(function() {
			$(this).find('a').show();
			$(this).find('.edit_a').show();
			$(this).find('.content').addClass('content1');
		}, function() {
			$(this).find('a').hide();
			$(this).find('.edit_a').hide();
			$(this).find('.content').removeClass('content1');
		});

   // 留言方式的切换------------------------------------------------
		var c=1;
		$('.close').click(function(event) {
			if(c==1){
				$('#right').stop().animate({"top": 800+'px'},2000).parent().parent().find('#bottom_out').stop().animate({"bottom": 0+'px'},3000);
				c=0;
			}else{
				$('#right').stop().animate({"top": 50+'px'},2000).parent().parent().find('#bottom_out').stop().animate({"bottom": -120+'px'},3000);
				c=1;
			}
		});

	


})

function onUpdate(id){
    //alert("确认修改？"+id);
    var URL = "update.php";
    var URL2 = "update_form.php";
    var form = $('right form');
    form.prop('action',URL2);
    form.prepend('<input type="hidden" name="id" value="'+id+'"/>');
    $('#right input[type="submit"]').val('更新');
    $.get(URL,{sid:id},function(data){
         var data =eval("("+ data +")");
         if(data.status===1){
             info = data.info;
             $('input[name="username"]').val(info.username);
             $('textarea[name="message"]').text(info.content);
             //var sex =$('input'[name="sex"]).eq(1);
            // alert(sex.val());
            // var sex = info.sex;
            // var sexElement = $('input[name="sex"]');
            var sexEle = $('#right input:radio[name="sex"]');
            for(i=0;i<2;i++){
                if(sexEle.eq(i).val()===info.sex){
                    sexEle.eq(i).prop('checked',true);                
                }
            }
          //性别的选择
          var contentEle = $("#right input:radio[name='imgurl']");
          for(var i=1; i<5;i++){
              str = "images/images"+i+".jpg";
              if(str===info.avater){
                  contentEle.eq(i-1).prop("checked",true);
              }
          }
          //头像的选择
         }else{
             alert("没有符合条件的数据信息");
         }
    });
    }

</script>

</head>

<body>
<div id="top">
    <h1 id="biaoti">留言板<?php
    session_start();
    if(isset($_SESSION['uid'])){
        echo "welcome,". $_SESSION['uname'];
        echo "<span><a href='logout.php'>注销</a></span>";
    }else {
    header("Location:login.html");
    }
    exit();
?>
    
    
    
    </h1>
</div>
   <!-- <div id="biaoqing"><img src="images/images1.jpg" alt="" /></div>-->
<div id="mian_out">
	  <div id="mian">
			<h2>其它人都说了什么</h2>
			<ul class="list">
    <?php 
                    require_once './db_conn.php';
                    $sql = "SELECT*FROM t_message";
                    $result = $conn->query($sql);
    ?>
         <?php if ($result->num_rows > 0) :?>
            <?php
            $rows = $result->fetch_all(MYSQLI_ASSOC);
            foreach($rows as $row):?>                                             
                                <li class="onep">
                                    <p class="id"><img src="<?php echo $row['avater'];?>" alt="" /></p> 
					<p class="username"><?php echo$row['username'];?></p>
                                        <p class="content"><?php echo $row['content'];?> </p>
                                        <!--<a class="edit_a" href="javascript:" onclick="if(confirm('确定修改吗？')) ">修改</a>-->
				        <a class="edit_a" href="javascript:" onclick="onUpdate(<?php echo $row['id'];?>);">修改</a>
					<a class="delete" href="javascript:" onclick="if(confirm('确定删除吗？')) location.href='delete.php?id=<?php echo $row['id']?>'" >删除</a>
				</li>
                               
        <?php endforeach;?>
    <?php else:?>
                                <p>0个结果</p>
    <?php endif;?>
                               
				        </ul>
   </div>
   
   <div id="right">
			<h2>留下你的脚步吧</h2>
			<form action="upadd.php" method="post">
				<p class="one">
                                    昵称:<input class="name" name="username" type="text" placeholder="你的名字" value="abc" />
				<input type="radio" name="sex" value="男" checked='checked'/>男侠
				<input type="radio" name="sex" value="女"/>女侠
				</p>
				<p><textarea name="message" placeholder="这个人很懒,什么都没有写" ></textarea></p>
				<p class="tow">                                                                                     
					<input type="radio" name="imgurl" value="images/images1.jpg" checked="checked" /><img src=" images/images1.jpg" alt="" />
					<input type="radio" name="imgurl" value="images/images2.jpg" /><img src=" images/images2.jpg" alt="" />
					<input type="radio" name="imgurl" value="images/images3.jpg" /><img src=" images/images3.jpg" alt="" />
					<input type="radio" name="imgurl" value="images/images4.jpg" /><img src=" images/images4.jpg" alt="" />
				</p>
				<p class="thr"><input class="btn" type="submit" value="提交" /></p>
			</form>
			<div class="close"></div>
</div>
   
</div>

<div id="bottom_out">
		<div id="bottom">
			<form action="upadd.php" method="post">
				<p class="one">
				昵称:<input class="name" name="username" type="text" placeholder="大爷你的名字" />
				<br/><br/>
				<input type="radio" name="sex" value="男" checked="checked" />男侠
				<input type="radio" name="sex" value="女" />女侠
				</p>
				<p><textarea name="message" placeholder="这个人很懒,什么都没有写" ></textarea></p>
				<p class="tow">
					<input type="radio" name="imgurl" value="images/images1.jpg" checked="checked" /><img src=" images/images1.jpg" alt="" />
					<input type="radio" name="imgurl" value="images/images2.jpg" /><img src=" images/images2.jpg" alt="" />
					<input type="radio" name="imgurl" value="images/images3.jpg" /><img src=" images/images3.jpg" alt="" />
					<input type="radio" name="imgurl" value="images/images4.jpg" /><img src=" images/images4.jpg" alt="" />
				</p>
				<p class="thr"><input class="btn" type="submit" value="提交" /></p>
			</form>
			<div class="close"></div>
		</div>
</div>

</body>
</html>
